import React, { Component } from 'react';
import { Slider, Tools } from 'weaver-mobile';

const getLabel = Tools.getLabel;

const arr = ['theme-default', 'theme-big', 'theme-large'];
export default class Demo extends Component {
  ball = React.createRef();
  render() {
    const theme = window.localStorage['theme'] || 'theme-default';
    let defaultValue = arr.indexOf(theme.replace(/-red$/,''));
    defaultValue = defaultValue !== -1 ? defaultValue : 0;
    return (
      <div className='wm-change-theme'>
        <div className='wm-change-theme-exam'>{getLabel('520452','支持动态字体的应用将会调整为下方您选择的字体大小。') }</div>
        <div className='wm-change-theme-action'>
          <Slider
            style={{ marginLeft: 30, marginRight: 30 }}
            defaultValue={defaultValue}
            min={0}
            max={2}
            step={1}
            marks={{ 1: '' }}
            dots={true}
            trackStyle={{ backgroundColor: '#999', height: 0 }}
            handleStyle={{ marginTop: -15, width: 30, height: 30, border: '1px solid #999' }}
            onChange={v => this.handleClick(v)}
          />
          <span className='wm-change-theme-mix'>A</span>
          <span className='wm-change-theme-max'>A</span>
          <span className='wm-change-theme-normal'>{getLabel('520453','标准') }</span>
          <span className={`wm-change-theme-middle ${window.e9_locale && window.e9_locale.userLanguage == 8 && 'middle-english'}`}>{getLabel('520454','中') }</span>
          <span className='wm-change-theme-large'>{getLabel('520455','大') }</span>
        </div>
      </div>
    );
  }

  handleClick = (v) => {
    const theme = window.localStorage['theme'] || 'theme-default';
    const value = arr[v] + (/-red$/.test(theme) ? '-red' : '');
    window.changeTheme && window.changeTheme(value);
    window.localStorage.setItem('theme', value);
  }
}
